//index页面 主页面
import React,{useEffect,useState} from 'react'
import { Outlet,useNavigate} from "react-router-dom"
import { Badge, TabBar } from 'antd-mobile'
import "../css/Index.css"
import { Cart, Category, Home, User } from '@nutui/icons-react'
import {useSelector,useDispatch} from "react-redux"
import {changenum} from "../store/modules/count"
import axios from "../ulits/https"

export default function Index() {

    const [list,setList]=useState([])

    const getAll=async()=>{
        let list = await axios.get("/getshoop")
        if(list.data.code===200){
            setList(list.data.list)
        }
    }

    useEffect(()=>{
        getAll()
    },[])

    const tabs = [
        {
            key: '/index/home',
            title: '首页',
            icon: (active) =>
                active ? <Home /> : <Home />,
            badge: Badge.dot,
        },
        {
            key: '/index/classify',
            title: '分类',
            icon: <Category />,
        },
        {
            key: '/index/scart',
            title: '购物车',
            icon: <Cart />,
            badge:list.length,
        },
        {
            key: '/index/mine',
            title: '我的',
            icon: <User />,
        },
    ]
    const navigate = useNavigate()
    const dispatch=useDispatch()
    const {value}=useSelector(state=>state.countSlice)

    return (
        <div>
            <Outlet></Outlet>
            <TabBar onChange={(e)=>{
                navigate(e)
                dispatch(changenum(e))
            }} className="i1" activeKey={value}>
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                        badge={item.badge}
                    />
                ))}
            </TabBar>
        </div>
    )
}
